<template>
    <div class="commonfooter">
        <div class="top">
            <img class="top-bg" src="../assets/img/source/footer-tt.jpg">
            <div class="top-text">
                <div class="top-title">一家专门做精品素材的网站</div>
                <div class="top-btn"><button class="vip-login">加入VIP获取全站资源</button></div>
            </div>
        </div>
        <div class="bot">
            <div class="bot-top">
                <div class="left">
                    <div class="logo">
                        <img src="../assets/img/logo.png">
                    </div>
                    <div class="desc">93源码网是一家专门做精品素材的网站，网站以网站源码、网站模板、网页特效为主要内容，以“共享创造价值”为理念。</div>
                </div>
                <div class="right">
                    <div class="right-box" :class="{'search-box':item.type == 2}" v-for="(item,index) of botList" :key="index">
                        <div class="right-title">{{item.title}}</div>
                        <template v-if="item.type == 1">
                            <div class="right-desc" v-for="(val,ind) of item.list" :key="ind">{{val.desc}}</div>
                        </template>
                        <template v-else>
                            <div class="right-search"><input class="search-input" type="text" placeholder="关键词"></div>
                            <div class="right-notice"><span class="search-text">资源数</span><span class="search-y">553</span><span class="search-text">最后更新</span><span class="search-y">2019-11-26</span></div>
                        </template>
                    </div>
                </div>
            </div>
            <div class="bot-center">
                <span class="center-title">友情链接：</span>
                <span class="center-text" v-for="item of friendLink" :key="item.id">{{item.name}}</span>
            </div>
            <div class="bot-bottom">
                &copy; 2019 SUCAIHU.COM ALL rights reserved 皖ICP备16002200号 <img src="../assets/img/icon/other.png">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            botList:[
                {
                    title:'本站导航',
                    type:1,
                    list:[
                        {
                            desc:'关于我们'
                        },
                        {
                            desc:'免责声明'
                        },
                        {
                            desc:'关于隐私'
                        },
                        {
                            desc:'广告合作'
                        }
                    ]
                },
                {
                    title:'更多介绍',
                    type:1,
                    list:[
                        {
                            desc:'重置与购买'
                        },
                        {
                            desc:'关于VIP'
                        },
                        {
                            desc:'友情链接'
                        },
                        {
                            desc:'联系我们'
                        }
                    ]
                },
                {
                    title:'快速搜索',
                    type:2
                },
            ],
            friendLink:[
                {
                    id:1,
                    name:'源码之家'
                },
                {
                    id:2,
                    name:'网站模板'
                },
                {
                    id:3,
                    name:'网站源码'
                }
            ]
        }
    }
};
</script>

<style lang="less" scoped>
@topTextWidth:380px;
@topTextHeight:120px;
.commonfooter{
    background:#FFFFFF;
    .top{
        position:relative;
        .top-bg{
            width:100%;
            height:100%;
        }
        .top-text{
            width:@topTextWidth;
            height:@topTextHeight;
            position:absolute;
            top:calc(50% - @topTextHeight / 2);
            left:calc(50% - @topTextWidth / 2);
            display:flex;
            flex-direction: column;
            justify-content: space-around;
            text-align: center;
            .top-title{
                font-size:28px;
                color:#ffffff;
            }
            .top-btn{
                .vip-login{
                    border:none;
                    outline:none;
                    cursor:pointer;
                    width:260px;
                    height:38px;
                    color:#726ffe;
                    background:#ffffff;
                    border-radius:4px;
                    font-size:@main-font-size;
                }
            }
        }
    }
    .bot{
        width:@max-width;
        margin:0 auto;
        padding-top:30px;
        .bot-top{
            padding-bottom:30px;
            display:flex;
            align-items: center;
            justify-content: space-between;
            .left{
                box-sizing: border-box;
                width:30%;
                padding-right: 15px;
                .logo{
                    width:258px;
                    height:68px;
                    margin-bottom:30px;
                    img{
                        width:100%;
                        height:100%;
                    }
                }
                .desc{
                    color:#afafaf;
                    font-size:@main-font-size;
                    line-height:1.8;
                    letter-spacing: 3px;
                }
            }
            .right{
                box-sizing: border-box;
                width:70%;
                height:220px;
                padding-left: 15px;
                display:flex;
                align-items: center;
                justify-content: space-between;
                .right-box{
                    width:25%;
                    height:100%;
                    font-size:@main-font-size;
                    .right-title{
                        color:@main-font-color;
                        line-height:32px;
                        margin-bottom:30px;
                    }
                    .right-desc{
                        color:#34495e;
                        line-height:40px;
                    }
                    .right-search{
                        margin-bottom:48px;
                        .search-input{
                            width:100%;
                            height:58px;
                            outline:none;
                            border:1px solid #eeeeee;
                            background:#f8f8f8;
                            color:@main-font-color;
                            border-radius:6px;
                            box-sizing: border-box;
                            padding:0 32px 0 18px;
                            background-image:url('../assets/img/icon/arrow.png');
                            background-repeat: no-repeat;
                            background-position:98% center;
                        }
                    }
                    .right-notice{
                        line-height:32px;
                        padding-left:32px;
                        font-size:@main-font-size;
                        .search-text{
                            display:inline-block;
                            color:#afafaf;
                            margin-right:14px;
                        }
                        .search-y{
                            display:inline-block;
                            color:#f9b074;
                            font-size:@main-font-size * 2;
                            margin-right:30px;
                        }
                    }
                }
                .right-box.search-box{
                    width:50%;
                }
            }
        }
        .bot-center{
            border:1px dashed #cccccc;
            background:#f7f8fa;
            height:68px;
            line-height:68px;
            padding-left:30px;
            font-size:@main-font-size;
            .center-title{
                color:#aeaeaf;
            }
            .center-text{
                color:#949494;
                margin:0 15px;
                cursor:pointer;
            }
        }
        .bot-bottom{
            text-align:center;
            font-size:@main-font-size;
            color:#afafaf;
            line-height:32px;
            margin-top:18px;
        }
    }
}
</style>